<template>
  <BasicCard
    v-for="(v, i) in cardOptions"
    :key="i"
    body-style="padding:16px 0 16px 20px;"
    class="card-item-warp"
  >
    <div class="card-item">
      <div class="left-img">
        <img :src="v.icon" />
      </div>
      <div class="right-content">
        <div class="tite">
          {{ v.title }}
        </div>
        <div class="data">
          {{ data[v.key] }}
          <span class="unit">{{ v.unit }}</span>
        </div>
      </div>
    </div>
  </BasicCard>
</template>

<script setup lang="ts">
  import {
    type PostJiTaiBaoBiao_gongXuResult,
    type PostWuLiaoBaoBiao_gongXuResult
  } from '@/api/shuJuBaoBiao'
  defineProps<{
    cardOptions: any
    data: PostJiTaiBaoBiao_gongXuResult['groupdata'] | PostWuLiaoBaoBiao_gongXuResult['groupdata']
  }>()
</script>

<style lang="scss" scoped>
  .card-item-warp {
    // width: 250px;
    min-width: 230px;
    height: 80px;
    margin-right: 12px;
  }

  .card-item {
    display: flex;
  }

  .left-img {
    width: 48px;
    height: 48px;
    margin-right: 44px;
  }

  .title {
    font-size: 14px;
    color: #4f5759;
    white-space: nowrap;
  }

  .data {
    margin-top: 7px;
    font-size: 20px;
    color: rgba($color: #000, $alpha: 90%);

    .unit {
      margin-right: 8px;
      font-size: 12px;
    }
  }
</style>
